<template>
  <div class="w">
    <div class="top">
      <div class="one">
        <i id="ico" class="iconfont icon-xiangzuojiantou" @click="Jump ('/index')"></i>
        <span>员工管理</span>
        <p @click="employee ('/employee/add')">添加</p>
      </div>
      <van-search
    v-model="value"
    show-action
    placeholder="搜索名字或电话号码"
    @search="onSearch"
  >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
      </van-search>
    </div>
    <div class="con">
      <van-swipe-cell v-for="item in data" :key="item.id">
        <div class="div" @click="employ('/employee/detail',item.id)">
        <div class="img">
          <img :src="item.pic" alt="">
        </div>
        <div class="rig">
          <p>
            <span>{{ item.lxName }}</span>
            &nbsp;{{item.sex ? '女':'男'}}&nbsp;
            {{item.lxPhone}}
          </p>
          <p>
            跟进客户:{{item.state}}&nbsp;&nbsp;
            周分分享量:{{ item.num }}
          </p>
        </div>
        </div>
        <template #right>
          <van-button square text="修改" type="warning" class="delete-button" size="" @click="employ('/employee/revise',item.id)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>
  </template>

<script>
import { Find } from '@/api/information'
export default {
  data () {
    return {
      value: '',
      data: '',
      companyId: ''
    }
  },
  methods: {
    async onSearch () {
      // eslint-disable-next-line no-useless-return
      if (!this.value) return
      const res = {
        companyId: this.companyId,
        keyWord: this.value
      }
      const data = await Find(res)
      this.data = data.data
      // console.log(data.data)
    },
    employee (url) {
      // console.log(this.companyId)
      this.$router.push({ path: url, query: { companyId: this.companyId } })
    },
    employ (url, res) {
      // console.log(this.companyId)
      this.$router.push({ path: url, query: { id: res } })
    },
    Jump (url) {
      this.$router.push({ path: url })
    },
    async getData () {
      this.companyId = this.$store.state.data.data.companyId
      await this.$store.dispatch('information/getfindSubAccount', { companyId: this.companyId })
      const res = this.$store.state.information.data
      this.data = res.data
      console.log(res.data)
    }
  },
  mounted () {
    this.getData()
  },
  watch: {
    $route: 'getData',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    value (nv, ov) {
      if (!nv) {
        this.getData()
        // console.log('更新')
      }
    }
  }
}
</script>

  <style lang="less" scoped>
  .w{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .top{
    width: 100%;
    height: 200px;
    background-color: #ffffff;
    >.one{
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >p{
        width: 115px;
        height: 57px;
        line-height: 57px;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        background-color: #ff4c4c;
      }
    }
  }
  .con{
    flex-grow: 1;
    background-color: #f7f7f7;
    .div{
      width: 680px;
      height: 145px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 20px;
      border-radius: 10px;
      margin-top: 15px;
      display: flex;
      align-content: center;
      >.img{
        margin-right: 30px;
        width: 105px;
        height: 105px;
        border-radius: 100%;
        background-color: aqua;
        >img{
          border-radius: 100%;
          width: 100%;
          height: 100%;
        }
      }
      >.rig{
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        >p{
        height: 40px;
        font-size: 26px;
        color: #999;
        >span{
          color: #000;
          font-size: 30px;
        }
      }
      }
    }
    /deep/ .van-button{
      width: 100px;
      height: 145px;
    }
  }
}
  </style>
